<template>
  <el-container class="page-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="logo-container">
        <img
          src="https://img0.baidu.com/it/u=2631990995,2997068474&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707" 
          alt="Logo"
          class="logo"
        />
        <span class="logo-text">小农旅社</span>
      </div>
    </div>
    <el-container>
      <!-- 左侧功能区域 -->
      <div class="left-section">
        <el-main class="login-container">
          <el-card class="login-card" shadow="hover">
            <h2 class="login-title">欢迎登录</h2>
            <el-form status-icon ref="ruleForm" label-width="80px" class="demo-ruleForm">
              <el-form-item label="账号" prop="account">
                <el-input
                  type="text"
                  v-model="account"
                  placeholder="请输入账号"
                  autocomplete="off"
                  prefix-icon="el-icon-user"
                />
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input
                  type="password"
                  v-model="pass"
                  placeholder="请输入密码"
                  autocomplete="off"
                  prefix-icon="el-icon-lock"
                />
              </el-form-item>
              <!-- 修复 navigateToAbout 未定义的问题 -->
              <a href="#" @click.prevent="navigateToAbout" style="margin-left: 60px;" class="register-link">还没有账号？立即注册</a>
              <el-form-item>
                <el-tooltip content="登录系统" placement="top">
                  <el-button
                    type="primary"
                    icon="el-icon-key"
                    @click="login"
                    style="margin-right: 200px;"
                    class="login-button"
                  >
                    登录
                  </el-button>
                </el-tooltip>
                <el-tooltip content="重置输入" placement="top">
                  <el-button
                    icon="el-icon-refresh"
                    @click="resetForm('ruleForm')"
                    style="margin-left: 20px;"
                    class="reset-button"
                  >
                    重置
                  </el-button>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </div>
      <!-- 右侧宣传区域 -->
      <div class="right-section">
        <div class="banner-content">
          <img
            src="https://n.sinaimg.cn/sinakd10111/244/w640h404/20200416/0be1-iskepxs5294793.jpg"
            alt="宣传插图"
            class="illustration"
          />
          <h2 class="slogan">"优选农品，从田间到餐桌"</h2>
          <p class="tagline">"分享农事点滴，传递丰收喜悦"</p>
        </div>
      </div>
    </el-container>
  </el-container>
</template>

<script>
import { login } from '@/api/login';

export default {
  data() {
    return {
      account: '2771651667', // 账号
      pass: '123456', // 密码
    };
  },
  methods: {
    // 修复 navigateToAbout 未定义的问题
    navigateToAbout() {
      this.$router.push('/register'); // 使用 Vue 2 的 this.$router 进行跳转
    },
    login() {
      const param = { uid: this.account, pwd: this.pass };
      login(param).then((res) => {
        if (res.data.code === 1) {
          localStorage.setItem('currentUser', JSON.stringify(res.data.data));
          if (res.data.data.position === 'cmer') {
            this.$router.push('/c/market');
          } else if (res.data.data.position === 'fmer') {
            this.$router.push('/f');
          }
          console.log(JSON.parse(localStorage.getItem('currentUser')).uid);
        } else {
          this.$message.error('登录失败，请检查账号和密码！');
        }
      });
    },
  },
};
</script>


<style scoped>
/* 页面整体布局 */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f8fc;
}

/* 顶部导航样式 */
.header {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
}

/* 去除虚线 */
.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

/* 左侧功能区样式 */
.left-section {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}

.login-card {
  width: 80%;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.login-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.register-link {
  font-size: 14px;
  color: #007bff;
  text-decoration: none;
}

.register-link:hover {
  text-decoration: underline;
}

/* 右侧宣传区样式 */
.right-section {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(120deg, #e6f7ff, #ffffff);
}

.banner-content {
  text-align: center;
}

.illustration {
  width: 80%;
  margin-bottom: 20px;
}

.slogan {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.tagline {
  font-size: 14px;
  color: #666;
}
</style>
